import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import WorkThumbnail from 'components/WorkThumbnail';

export default class Showcase extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { name, allEntryLink, workList } = this.props;
    return (
      <div className="showcase">
        <div className="section-header">
          <span className="title">{name}</span>
          <Link to={allEntryLink}>
            <div className="show-all">
              <span>查看全部</span>
              <span className="icon-wrapper"><i className="icon-black_pagination_right" /></span>
            </div>
          </Link>
        </div>
        <div className="thumb-list">
          {this.renderThumbList(workList)}
          {this.renderDummyElements()}
        </div>
      </div>
    );
  }

  renderThumbList(workList) {
    return workList && workList.map(work => <WorkThumbnail key={work.id} work={work} />);
  }

  renderDummyElements() {
    const dummies = [1, 2, 3, 4, 5, 6, 7];
    return dummies.map(dmy => (
      <div key={dmy} className="thumb-item dummy" />
    ));
  }
}

Showcase.propTypes = {
  name: PropTypes.string,
  workList: PropTypes.array,
  allEntryLink: PropTypes.string,
};
